﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<div class="modal-dialog x-modal-dialog" style="width: 800px;">

  <div class="modal-content">

    <div class="modal-header x-breadcrumb no-bottom-border clearfix">

      <h2><i class="glyphicon glyphicon-fire" title=""></i>&nbsp;&nbsp;<span>活动列表&nbsp;-&nbsp;过滤查询</span></h2>

      <button type="button" class="close" data-dismiss="modal">&times;</button>

    </div>

    <form class="form-horizontal" method="GET" action="${ctx.host}/activities">

      <input type="hidden" name="filter" value="true" >

      <div class="modal-body">

        <div class="form-group x-form-group">
          
          <label class="col-xs-2 control-label">活动名称</label>
          <div class="pull-left" style="width: 30%">
            <input type="text" class="form-control" name="name" value="${param.name}" placeholder="支持模糊查询"/>
          </div>
          
          <label class="col-xs-2 control-label">上下架状态</label>
          <div class="pull-left" style="width: 30%">
            <select name="status" class="form-control" data-selected="${param.status}" data-live-search="true" data-size="5">
                <option value="">全部</option>
                <c:forEach var="status" items="${enums['status']}" >
                    <option value="${status}">${status.description}</option>
                </c:forEach>
            </select>
          </div>
          
        </div>

        <div class="form-group x-form-group">
          
          <label class="col-xs-2 control-label">活动开始时间</label>
          <div class="pull-left" style="width: 65%">
            <div class="input-group">
                <input type="text" class="form-control date" name="beginDate" value="${param.beginDate}" />
                <span class="input-group-addon">至</span>
                <input type="text" class="form-control date" name="endDate" value="${param.endDate}" />
            </div>
          </div>
        </div>
        
      </div>

      <div class="modal-footer">
        <button type="submit" class="btn btn-success btn-shadow btn-shadow-success x-btn">查询</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-default btn-shadow btn-shadow-default x-btn" data-dismiss="modal">取消</button>
      </div>

    </form>

  </div>
  
  <script src="${ctx.resource}/js/component/select2.min.js"></script>
  <script src="${ctx.resource}/js/component/shiftform.js"></script>
  <script src="${ctx.resource}/js/component/bootstrap.validate.js"></script>
  <script src="${ctx.resource}/js/component/bootstrap.validate.en.js"></script>
  <script src="${ctx.resource}/js/component/bootstrap-datetimepicker.js"></script>
  <script src="${ctx.resource}/js/component/bootstrap-datetimepicker.zh-CN.js"></script>
  <script type="text/javascript">
    
    $(document).ready(function(){

        $('.date').datetimepicker({
          format: 'yyyy-mm-dd',
          autoclose: true,
          language: 'zh-CN',
          todayBtn: 'linked',
          todayHighlight: true,
          pickerPosition: 'bottom-right',
          minView: 'month'
        });

        $('select[name="status"]').select2({
            placeholder : '请选择上架状态',
            minimumResultsForSearch : 5,
            allowClear : true
        });
        
        var selectedStatus = $('select[name="status"]').data('selected');
        $('select[name="status"]').select2('val', selectedStatus);

    })
    
  </script>

</div>